<template>
  <div>
    <el-table :data="tableDataList" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="130">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="100">
      </el-table-column>
      <el-table-column prop="catalog" label="目录"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="100">
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="300">
        <template #default="{row}">
          {{ fromTime(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度"> </el-table-column>
      <el-table-column prop="creator" label="录入人" width="130">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态"> </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="100">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="100">
      </el-table-column>
      <el-table-column fixed="right" prop="address" label="操作" width="250">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleClick(row)">
            预览
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="chkStateList(row.id)"
            :disabled="row.chkState !== '待审核'"
          >
            审核
          </el-button>
          <el-button
            type="text"
            size="small"
            :disabled="row.publishState === '已发布'"
            @click="$router.push('/questions/new/?id=' + row.id)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="updataRow(row)"
          >
            <span>{{ row.publishState === "已发布" ? "下架" : "上架" }}</span>
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(row)"
            :disabled="row.publishState === '已发布'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog title="题目审核" :visible.sync="dialogVisible1" width="30%">
        <el-form>
          <el-form-item>
            <el-radio v-model="radio" :label="1">通过</el-radio>
            <el-radio v-model="radio" :label="2">拒绝</el-radio>
          </el-form-item>
          <el-form-item>
            <el-input
              type="textarea"
              placeholder="请输入审核意见"
              v-model="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <span>【题型】:{{ newTable.questionType }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:{{ newTable.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】:{{ newTable.difficulty }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:{{ newTable.tags }}</span>
        </el-col>
      </el-row>
      <el-row class="row-bg">
        <el-col :span="6">
          <span>【学科】:{{ dialogItemObj.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】:{{ dialogItemObj.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】:{{ dialogItemObj.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <span>【题干】:</span>
      <p style="color: blue">{{ clearHTMLTag(dialogItemObj.question) }}</p>
      <p v-if="dialogItemObj.questionType !== '3'">
        选项:(以下选中的选项为正确答案)
      </p>
      <div v-if="dialogItemObj.questionType === '1'">
        <el-row v-for="item in dialogItemObj.options" :key="item.id">
          <el-col :span="6">
          <el-radio-group :value="radio">
            <el-radio :label="item.isRight">{{ item.title }}</el-radio>
          </el-radio-group>
        </el-col>
        </el-row>
      </div>
      <div v-else-if="dialogItemObj.questionType === '2'">
        <el-row
          v-for="item in dialogItemObj.options"
          :key="item.id"
          :span="6"
          class="row-bg"
        >
          <el-col>
            <el-checkbox
              onClick="javascript:return false"
              v-model="item.isRight"
              :true-label="1"
              :false-label="0"
              >{{ item.title }}</el-checkbox
            >
          </el-col>
        </el-row>
      </div>
      <hr />

      <span>【参考答案】:</span>
      <el-button @click="isShow = !isShow" type="danger" v-model="isShow"
        >视频答案预览</el-button
      >
      <div v-if="isShow">
        <video width="320" height="240" controls autoplay>
          <source src="movie.mp4" type="video/mp4" />
          <source src="movie.ogg" type="video/ogg" />
          <source src="movie.webm" type="video/webm" />
          您的浏览器不支持 video 属性。
        </video>
      </div>
      <hr />
      <el-row class="row-bg" style="margin-top: 20px">
        <el-col>
          <span>【答案解析】:{{ clearHTMLTag(dialogItemObj.answer) }}</span>
        </el-col>
      </el-row>
      <hr />
      <span>【题目备注】:{{ dialogItemObj.remarks }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  remove,
  // choicePublish,
  choice,
  choiceCheck,
  detail
} from '@/api/hmmm/questions'

export default {
  props: {
    tableDataList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      dialogVisible1: false,
      radio: 1,
      rowId: 0,
      textarea: '',
      dialogVisible: false,
      isShow: false,
      dialogItemObj: {},
      checked: false,
      newTable: {}
    }
  },
  created () {
    this.getChoiceList()
  },
  methods: {
    // 处理时间
    fromTime (timer) {
      const jsonDate = new Date(timer).toJSON()
      // 东八区需要加八小时
      const Datatimer = new Date(jsonDate).getTime() + 8 * 3600 * 1000
      return new Date(Datatimer)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    // 删除
    deleteRow (row) {
      this.$confirm('确认删除么?').then(async () => {
        await remove({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.tableDataList = this.tableDataList.filter(
          (item) => item.id !== row.id
        )
      })
    },
    // 上架下架
    updataRow (row) {
      this.$confirm(
        `确认要${row.publishState === '已发布' ? '下架' : '上架'}吗?`
      ).then(() => {
        // await choicePublish(row)
        // console.log(row.id)
        if (row.publishState === '已发布') {
          row.publishState = '已下架'
          this.$message.success('下架成功')
        } else {
          row.publishState = '已发布'
          this.$message.success('上架成功')
        }
      })
    },
    // 获取题库列表
    async getChoiceList () {
      await choice()
    },
    chkStateList (id) {
      this.dialogVisible1 = true
      this.rowId = id
      this.getChoiceList(id)
    },
    submit () {
      if (this.textarea === '') return this.$message.warning('请输入审核意见')
      this.getShvalue({
        chkRemarks: this.textarea,
        chkState: this.radio,
        id: this.rowId
      })
      this.dialogVisible1 = false
      this.textarea = ''
      this.$message.success('审核成功')
      this.$emit('updataShvalue')
    },
    async getShvalue (data) {
      await choiceCheck(data)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false
        })
        .catch((_) => {})
    },
    clearHTMLTag (str) {
      if (str) {
        return str.replace(/<[^>]+>/g, '')
      }
    },
    async handleClick (row) {
      this.dialogVisible = true
      const res = await detail({ id: row.id })
      this.newTable = this.tableDataList.find((item) => item.id === row.id)
      this.dialogItemObj = res.data
    },
    close () {
      this.dialogVisible1 = false
      this.textarea = ''
    }
  }
}
</script>

<style>
</style>
